<template>
    <div class="setting">
        <div class="setting-wraps">
            <div class="label">{{ $t("workTodos.setting.base") }}</div>
            <div class="group">
                <div class="content">
                    <div>{{ $t("workTodos.setting.base.language") }}：</div>
                    <a-select v-model:value="modelRef.language" size="small" style="width: 100px;">
                        <a-select-option value="zh-cn">{{ $t("workTodos.setting.base.language.zh") }}</a-select-option>
                        <a-select-option value="en">{{ $t("workTodos.setting.base.language.en") }}</a-select-option>
                    </a-select>
                </div>
                <div class="content">
                    <a-checkbox v-model:checked="modelRef.autoStart">{{ $t("workTodos.setting.base.autoStart") }}</a-checkbox>
                </div>
                <div class="content">
                    {{ $t("workTodos.setting.base.signature") }}：<a-input v-model:value="modelRef.signature" style="width: 500px;"></a-input>
                </div>
                <div class="content">
                    <div>{{ $t("workTodos.setting.base.closeing") }}：</div>
                    <a-radio-group v-model:value="modelRef.closeMode">
                        <a-radio :value="0">{{ $t("workTodos.setting.base.closeing.mode.one") }}</a-radio>
                        <a-radio :value="1">{{ $t("workTodos.setting.base.closeing.mode.two") }}</a-radio>
                    </a-radio-group>
                </div>
            </div>
            <div class="label">{{ $t("workTodos.setting.data") }}</div>
            <div class="group">
                <div class="content">
                    <div>{{ $t("workTodos.setting.data.storage") }}：</div>
                    <div>{{ modelRef.filePath }}</div>
                    <a-button size="small" style="margin-left: auto" @click="onGetStorage">{{ $t("workTodos.setting.data.btn") }}</a-button>
                </div>
                <div class="content">
                    <div>{{ $t("workTodos.setting.data.delete.schedule")}}：</div>
                    <a-button size="small" @click="clearSchedule">{{ $t("common.btn.ok") }}</a-button>
                </div>
                <div class="content">
                    <div>{{ $t("workTodos.setting.data.delete.note")}}：</div>
                    <a-button size="small" @click="clearNote">{{ $t("common.btn.ok") }}</a-button>
                </div>
            </div>
            <div class="label">{{ $t("workTodos.setting.about") }}</div>
            <div class="group">
                <div class="content">{{ $t("workTodos.setting.about.version") }}：{{ project.version }}</div>
            </div>
            <div class="operate">
                <a-button @click="onCancel" style="margin-right: 8px;">{{ $t("common.btn.cancel") }}</a-button>
                <a-button @click="onSave" type="primary">{{ $t("common.btn.save") }}</a-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { Modal } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n();
const modelRef = ref<any>({
    language: 'zh-cn',
    signature: '每次相遇都是不期而遇！',
    autoStart: false,
    closeMode: 1,
    filePath: '',
})

const project = ref<any>({})

const getSetting = async () => {
    try{
        const data = JSON.parse(await window.electron.onGetDatas(3) || "{}");
        modelRef.value = {
            language: data.language || 'zh-cn',
            signature: data.signature || '每次相遇都是不期而遇！',
            autoStart: data.autoStart || false,
            closeMode: data.closeMode || 1,
            filePath: data.filePath || '',
        }
        project.value = await window.electron.onGetProject();
    }catch(err: any){
        message.error(err.toString())
    }
}

const setSetting = async () => {
    try{
        const params = JSON.stringify(modelRef.value);
        await window.electron.onSetDatas(params, 3);
        // 通知主进程设置程序是否自启动
        window.electron.onSetting(modelRef.value.autoStart);
        // 设置语言
        window.localStorage.setItem('language', modelRef.value.language)
        locale.value = modelRef.value.language
        console.log(locale.value)
        message.success(t("common.save.success"))
    }catch(err: any){
        message.error(err.toString())
    }
}

const onGetStorage = async() => {
    const res = await window.electron.onGetStorage() || [];
    if(res.length){
        modelRef.value.filePath = res[0];
    }
}

const clearSchedule = () => {
    Modal.confirm({
        title: t('workTodos.setting.data.delete.schedule.tip'),
        width: 300,        
        okText: t('common.btn.ok'),
        cancelText: t('common.btn.cancel'),
        onOk() {
            return window.electron.onSetDatas("{}", 1).then(() => {
                message.success(t("common.delete.success"))
            }).catch((err: any) => {
                message.error(err.toString())
            });
        },
        onCancel() {},
    });
}

const clearNote = () => {
    Modal.confirm({
        title: t('workTodos.setting.data.delete.note.tip'),
        width: 300,        
        okText: t('common.btn.ok'),
        cancelText: t('common.btn.cancel'),
        onOk() {
            return window.electron.onSetDatas("[]", 2).then(() => {
                message.success(t("common.delete.success"))
            }).catch((err: any) => {
                message.error(err.toString())
            });
        },
        onCancel() {},
    });
}

const onCancel = () => {
    getSetting();
}

const onSave = () => {
    setSetting();
}
onMounted(async() => {
    await getSetting();
    // 通知主进程设置程序是否自启动
    window.electron.onSetting(modelRef.value.autoStart);
    // 设置语言
    window.localStorage.setItem('language', modelRef.value.language)
    locale.value = modelRef.value.language
})
</script>

<style lang="less" scoped>
/* CSS */
.setting {
    width: 100%;
    height: 100%;
    padding: 8px;
    &-wraps {
        background-color: #fff;
        font-size: 16px;
        padding: 16px;
        border-radius: 5px;
        -webkit-app-region: no-drag;
        .label{
            font-size: 16px;
            font-weight: 700;
            color: #000;
        }
        .group{
            padding: 16px;
            .content{
                display: flex;
                align-items: center;
                font-size: 14px;
                margin-bottom: 16px;
                &:last-of-type{
                    margin-bottom: 0;
                }
            }
            &:last-of-type{
                padding-bottom: 0;
            }
        }
        .operate{
            text-align: right
        }
    }
}
</style>